<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <link rel="stylesheet" href="../../css/user.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 暂时移除Chart.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script> -->
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <i class="fas fa-truck-fast"></i>
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                        <li><a href="../../index.html"><i class="fas fa-home"></i> 首页</a></li>
                        <li><a href="dashboard.html" class="active"><i class="fas fa-user"></i> 用户中心</a></li>
                        <li><a href="../../pages/courier/dashboard.html"><i class="fas fa-truck"></i> 物流员中心</a></li>
                        <li><a href="../../pages/admin/dashboard.html"><i class="fas fa-cogs"></i> 管理员中心</a></li>
                        <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                    </ul>
            </nav>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <main class="container" id="app-container">
        <section class="hero">
            <div class="hero-content">
                <h2>用户中心</h2>
                <p>管理您的物流查询记录和个人信息</p>
            </div>
        </section>

        <section class="dashboard-cards user-cards">
            <!-- 用户信息卡片 -->
            <div class="card animate-on-scroll">
                <div class="card-header">
                    <h2>个人信息</h2>
                </div>
                <div class="card-content user-profile">
                    <div class="profile-avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <div class="profile-info">
                        <h3 id="username">用户</h3>
                        <p class="profile-email">user@example.com</p>
                        <button id="edit-profile-btn" class="btn-secondary">
                            <i class="fas fa-edit"></i> 编辑资料
                        </button>
                    </div>
                </div>
            </div>

            <!-- 查询统计卡片 -->
            <div class="card animate-on-scroll">
                <div class="card-header">
                    <h2><i class="fas fa-chart-line"></i> 查询统计</h2>
                </div>
                <div class="card-content">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">3</div>
                            <div class="stat-label">本周查询</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">12</div>
                            <div class="stat-label">本月查询</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">48</div>
                            <div class="stat-label">历史查询</div>
                        </div>
                    </div>
                    <!-- 图表功能暂时禁用 -->
                    <!-- <div class="chart-container">
                        <canvas id="trackingChart"></canvas>
                    </div> -->
                </div>
            </div>

            <!-- 最近查询卡片 -->
            <div class="card animate-on-scroll">
                <div class="card-header">
                    <h2><i class="fas fa-history"></i> 最近查询</h2>
                    <a href="#" class="view-all-link">查看全部</a>
                </div>
                <div class="card-content">
                    <div class="track-form" style="margin-bottom: 20px;">
                        <input type="text" id="tracking-number" placeholder="请输入运单编号" required>
                        <button id="track-btn" class="btn-primary">
                            <i class="fas fa-search"></i> 立即查询
                        </button>
                    </div>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>运单编号</th>
                                    <th>状态</th>
                                    <th>查询时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="recent-tracking">
                                <!-- 数据将通过JavaScript加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </section>
    </main>

    <footer>
        <div class="container footer-container">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="dashboard.html">用户中心</a></li>
                    <li><a href="track.html">物流查询</a></li>
                    <li><a href="../../pages/auth/login.html">登录</a></li>
                    <li><a href="../../pages/auth/register.html">注册</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
                </ul>
            </div>
        </div>
        <div class="container footer-bottom">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟从localStorage获取用户信息
            const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {
                username: '用户',
                email: 'user@example.com'
            };

            // 更新用户名
            document.getElementById('username').textContent = userInfo.username;
            document.querySelector('.profile-email').textContent = userInfo.email;

            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', (e) => {
                e.preventDefault();
                // 模拟退出登录
                localStorage.removeItem('token');
                localStorage.removeItem('userInfo');
                window.location.href = '../../pages/auth/login.html';
            });

            // 快速查询
            document.getElementById('track-btn').addEventListener('click', () => {
                const trackingNumber = document.getElementById('tracking-number').value;
                if (trackingNumber) {
                    // 存储查询单号
                    localStorage.setItem('trackingNumber', trackingNumber);
                    // 跳转到查询页面
                    window.location.href = 'track.html?trackingNumber=' + trackingNumber;
                } else {
                    showNotification('请输入运单编号', 'warning');
                }
            });

            // 按回车键查询
            document.getElementById('tracking-number').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    document.getElementById('track-btn').click();
                }
            });

            // 页面加载时获取最近查询记录
            function loadRecentTracking() {
                // 模拟数据
                const recentTracking = [
                    { id: 'PKG123456', status: 'pending', time: '2023-12-10 10:30' },
                    { id: 'PKG654321', status: 'in-transit', time: '2023-12-09 15:45' },
                    { id: 'PKG987654', status: 'delivered', time: '2023-12-08 09:15' }
                ];

                const container = document.getElementById('recent-tracking');
                if (container) {
                    let html = '';
                    recentTracking.forEach(item => {
                        // 状态样式映射
                        const statusClassMap = {
                            'pending': 'status-pending',
                            'in-transit': 'status-in-transit',
                            'delivered': 'status-delivered',
                            'cancelled': 'status-cancelled'
                        };

                        const statusTextMap = {
                            'pending': '待发货',
                            'in-transit': '运输中',
                            'delivered': '已送达',
                            'cancelled': '已取消'
                        };

                        html += `
                            <tr>
                                <td>${item.id}</td>
                                <td><span class="status-badge ${statusClassMap[item.status] || ''}">${statusTextMap[item.status] || item.status}</span></td>
                                <td>${item.time}</td>
                                <td><a href="track.html?trackingNumber=${item.id}" class="btn-primary">查看详情</a></td>
                            </tr>
                        `;
                    });
                    container.innerHTML = html;
                }
            }

            // 图表功能暂时禁用
            /*
            function initTrackingChart() {
                const ctx = document.getElementById('trackingChart').getContext('2d');
                const chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '查询次数',
                            data: [5, 8, 6, 7, 12, 9],
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 2,
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0
                                }
                            }
                        }
                    }
                });
            }*/

            // 移动端菜单切换
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const mainNav = document.querySelector('.main-nav');

            if (mobileMenuBtn && mainNav) {
                mobileMenuBtn.addEventListener('click', function() {
                    mainNav.classList.toggle('active');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
                    mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
                });
            }

            // 滚动动画
            const animateOnScroll = () => {
                const elements = document.querySelectorAll('.animate-on-scroll');
                elements.forEach(element => {
                    const elementPosition = element.getBoundingClientRect().top;
                    const screenPosition = window.innerHeight / 1.2;

                    if (elementPosition < screenPosition) {
                        element.classList.add('visible');
                    }
                });
            };

            // 显示通知
            function showNotification(message, type = 'info') {
                // 创建通知元素
                const notification = document.createElement('div');
                notification.className = `notification notification-${type}`;
                notification.textContent = message;

                // 添加到页面
                document.body.appendChild(notification);

                // 显示通知
                setTimeout(() => {
                    notification.classList.add('show');
                }, 100);

                // 3秒后隐藏通知
                setTimeout(() => {
                    notification.classList.remove('show');
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 3000);
            }

            // 执行初始化
            loadRecentTracking();
            // initTrackingChart(); // 暂时禁用图表初始化
            animateOnScroll();
            window.addEventListener('scroll', animateOnScroll);
        });
    </script>
</body>
</html>